<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据分析概览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:replace="include/include_css::html"/>
    <link rel="stylesheet" href="../../static/css/all.css" th:href="@{/static/css/all.css}"/>

    <!--[if lt IE 9]>
    <script src="../../static/js/ie/respond.min.js" th:src="@{/static/js/ie/respond.min.js}"></script>
    <script src="../../static/js/ie/html5.js" th:src="@{/static/js/ie/html5.js}"></script>
    <![endif]-->
    <script src="../../static/js/jquery-3.2.1.js" th:src="@{/static/js/jquery-3.2.1.js}" type="text/javascript"
            charset="utf-8"></script>
    <!--IE8只能支持jQuery1.9-->
    <!--[if lte IE 8]>
    <script src="../../static/js/ie/jquery.min.js" th:src="@{/static/js/ie/jquery.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" th:inline="javascript">
        contextPath = /*[[@{/}]]*/ '';
    </script>
    <style type="text/css">
        .layui-table-box {
            min-height: 340px !important;
        }

        i.layui-anim {
            display: inline-block
        }
    </style>
</head>
<body style="background: #f8f8f8;">
<!--列表页内容--START-->
<div class="docs-wrapper">
    <div class="cq_person_center">
        <div class="container">
            <div class="layui-tab layui-tab-brief" lay-filter="nav_tab">
                <!--                <div th:replace="include/location::current_location(null,'性能监控',null,null)"></div>-->

                <ul class="layui-tab-title">
                    <li>概览</li>
                </ul>
                <div class="layui-tab-content" style="border: none; overflow: visible;">
                    <br/>
                    <div class="layui-tab-item sp_card_box layui-show">
                        <div class="layui-row layui-card" style="margin-bottom: 8px; ">
                            <button th:class="${isStarted==true?'layui-btn layui-btn-danger layui-btn-lg':'layui-btn layui-btn-normal layui-btn-lg'}"
                                    id="start_migrate" th:data-status="${isStarted==true?'1':'0'}"
                                    onclick="startMigrate(this)">
                                <i class="layui-icon" th:if="${isStarted==false}">加载数据 &#xe652;</i>
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                                   th:if="${isStarted==true}"
                                   style="font-size: 36px">&#xe63d;</i>
                            </button>
                        </div>
                        <!--政策库-->
                        <div class="layui-row layui-card" style="margin-bottom: 8px; ">
                            <p id="migrate_file"></p>
                        </div>
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">表总数</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_tables">-</p>
                                            <p>个</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg3.png"
                                                 th:src="@{/static/images/other/num_bg3.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">已完成</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_completed">-</p>
                                            <p>个</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg2.png"
                                                 th:src="@{/static/images/other/num_bg2.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">处理中</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_processing">-</p>
                                            <p>个</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg1.png"
                                                 th:src="@{/static/images/other/num_bg1.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">失败数</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_failed">-</p>
                                            <p>个</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg3.png"
                                                 th:src="@{/static/images/other/num_bg3.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space15">

                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">传输时间</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_transferTime">-</p>
                                            <p>秒</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg2.png"
                                                 th:src="@{/static/images/other/num_bg2.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">传输大小</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_volume">-</p>
                                            <p>字节</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg1.png"
                                                 th:src="@{/static/images/other/num_bg1.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">传输率</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_speedOfSize">-</p>
                                            <p>字节/秒</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg3.png"
                                                 th:src="@{/static/images/other/num_bg3.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">传输率</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_speedOfRows">-</p>
                                            <p>行/秒</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg2.png"
                                                 th:src="@{/static/images/other/num_bg2.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">已读取行数</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_rowsOfRead">-</p>
                                            <p>行</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg1.png"
                                                 th:src="@{/static/images/other/num_bg1.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3 sp_card_col">
                                <div class="layui-card">
                                    <div class="layui-card-header">已写入行数</div>
                                    <div class="layui-card-body">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <p class="num" id="total_monitor_rowsOfWrite">-</p>
                                            <p>行</p>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <img src="../../static/images/other/num_bg3.png"
                                                 th:src="@{/static/images/other/num_bg3.png}" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-card" style="margin-bottom: 8px; ">
                            <button th:class="${isLoading==true?'layui-btn layui-btn-danger layui-btn-lg':'layui-btn layui-btn-normal layui-btn-lg'}"
                                    id="load_in" th:data-status="${isLoading==true?'1':'0'}"
                                    onclick="startLoading(this)">
                                <i class="layui-icon" th:if="${isLoading==false}">迁移数据 &#xe652;</i>
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                                   th:if="${isLoading==true}"
                                   style="font-size: 36px">&#xe63d;</i>
                            </button>
                        </div>

                        <div class="layui-row layui-col-space15">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>表名</th>
                                    <th>正在处理文件</th>
                                    <th>已读取行数</th>
                                    <th>已写入行数</th>
                                    <th>已传输字节</th>
                                    <th>已传输时间</th>
                                    <th>异常信息</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="table:${tables}" th:id="${table.tableName}">
                                    <td th:text="${table?.tableName}"></td>
                                    <td th:text="${table?.fileName}"></td>
                                    <td th:text="${table?.rowsOfRead}"></td>
                                    <td th:text="${table?.rowsOfWrite}"></td>
                                    <td th:text="${table?.transferred}"></td>
                                    <td th:text="${table?.transferTime}"></td>
                                    <td th:text="${table?.exception}"></td>
                                </tr>
                                </tbody>
                            </table>

                        </div>

                        <div class="layui-row layui-col-space15" style="display: none;">
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">行业分类统计图</div>
                                    <div class="layui-card-body">
                                        <form class="layui-form">
                                            <div class="choose_ckeck">
                                                <input type="radio" name="type" lay-filter='type1' value="政策数"
                                                       title="政策数" checked="" data-id='1'>
                                                <input type="radio" name="type" lay-filter='type1' value="解读数"
                                                       title="解读数" data-id='2'>
                                                <input type="radio" name="type" lay-filter='type1' value="推送数"
                                                       title="推送数" data-id='3'>
                                            </div>
                                        </form>
                                        <!--倒序-->
                                        <div id="industry_proportion_statistics"
                                             style="width: 100%;height:320px; z-index: 3;" class='js_cov'
                                             data-id='1'></div>
                                        <div id="industry_2" style="width: 100%;height:320px;  z-index: 2;"
                                             class='js_cov' data-id='2'></div>
                                        <div id="industry_3" style="width: 100%;height:320px;  z-index: 1;"
                                             class='js_cov' data-id='3'></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">颁发部门分类统计图</div>
                                    <div class="layui-card-body">
                                        <form class="layui-form">
                                            <div class="choose_ckeck">
                                                <input type="radio" name="type" lay-filter='type2' value="政策数"
                                                       title="政策数" checked="" data-id='1'>
                                                <input type="radio" name="type" lay-filter='type2' value="解读数"
                                                       title="解读数" data-id='2'>
                                                <input type="radio" name="type" lay-filter='type2' value="推送数"
                                                       title="推送数" data-id='3'>
                                            </div>
                                        </form>
                                        <div id="department_proportion_statistics"
                                             style="width: 100%;height:320px; z-index: 3;" class='js_cov'
                                             data-id='1'></div>
                                        <div id="department_2" style="width: 100%;height:320px;  z-index: 2;"
                                             class='js_cov' data-id='2'></div>
                                        <div id="department_3" style="width: 100%;height:320px;  z-index: 1;"
                                             class='js_cov' data-id='3'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script th:replace="include/include_js::html"></script>
<script src="../../static/js/echart/echarts.js" th:src="@{/static/js/echart/echarts.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../static/js/echart/echartsTheme.js" th:src="@{/static/js/echart/echartsTheme.js}"
        type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/singleMonitor/overview.js}"></script>
<script type="text/javascript">
    var initFinished = [[${initFinished}]];
    if (initFinished === false) {
        loading();
    }
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        // 通过路径传递参数的方法（服务端采用第一种方法"@ServerEndpoint"实现）
        websocket = new WebSocket("ws://127.0.0.1:8080/migrate/websocket/10000");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        var json = JSON.parse(event.data);
        if (json.type === 1) {
            // 总的监控
            $('#total_monitor_tables').text(json.tables);
            $('#total_monitor_completed').text(json.completed);
            $('#total_monitor_processing').text(json.processing);
            $('#total_monitor_failed').text(json.failed);
            $('#total_monitor_transferTime').text(json.transferTime);
            $('#total_monitor_volume').text(json.volume);
            $('#total_monitor_speedOfSize').text(json.speedOfSize);
            $('#total_monitor_speedOfRows').text(json.speedOfRows);
            $('#total_monitor_rowsOfRead').text(json.rowsOfRead);
            $('#total_monitor_rowsOfWrite').text(json.rowsOfWrite);
        } else if (json.type === 0) {
            // 载入mysql库
            console.log(json)
            var dom = $('#' + json.tableName);
            var tr =
                '<td>' + json.tableName + '</td>' +
                '<td>' + json.fileName + '</td>' +
                '<td>' + json.rowsOfRead + '</td>' +
                '<td>' + json.rowsOfWrite + '</td>' +
                '<td>' + json.transferred + '</td>' +
                '<td>' + json.transferTime + '</td>' +
                '<td>' + json.exception + '</td>';
            $(dom).html(tr);
        }
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML = innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    function startMigrate(dom) {
        if ($(dom).attr('data-status') === '1') {
            return;
        }
        $.ajax({
            url: contextPath + 'monitor/start.do',
            type: 'get',
            async: true,
            dateType: 'json',
            success: function (res) {
                notice('info', res.data);
                $(dom).attr('data-status', '1');
                $(dom).removeClass('layui-btn-normal');
                $(dom).addClass('layui-btn-danger');
                $(dom).html('<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 36px">&#xe63d;</i> ')
            },
            error: function (data) {
                notice('error', data.message)
            }
        });
    }

    function startLoading(dom) {
        if ($(dom).attr('data-status') === '1') {
            return;
        }
        $.ajax({
            url: contextPath + 'monitor/loading.do',
            type: 'get',
            async: true,
            dateType: 'json',
            success: function (res) {
                notice('info', res.data);
                $(dom).attr('data-status', '1');
                $(dom).removeClass('layui-btn-normal');
                $(dom).addClass('layui-btn-danger');
                $(dom).html('<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 36px">&#xe63d;</i> ')
            },
            error: function (data) {
                notice('error', data.message)
            }
        });
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>